/**
    webpack.config.js webpack的配置文件
        作用：指示 webpack 干那些活（当你运行 webpack 指令时，会加载里面的配置）
        所有构件工具都是基于 nodejs 平台运行的~模块化默认采用 commonjs

    loader： 1、下载    2、使用（配置loader）
    plugins： 1、下载    2、引用    3、使用（配置plugins）
*/

// resolve 用来拼接绝对路径的方法
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 提取css为单独文件，而并非打包到html中去
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 压缩css的插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

// html-webpack-plugin
// new HtmlWebpackPlugin()   功能：默认会创建一个空的html文件，不会自动引入打包输出的所有资源（js/css）
const htmlPlugin = new HtmlWebpackPlugin({
    // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
    template: './src/index.html',
    filename: 'index.html'
});

const cssPlugins = new MiniCssExtractPlugin({
    // 对输出的css文件进行重命名
    filename: 'css/built.css'
});

const optimizeCssAssetsPlugin = new OptimizeCssAssetsPlugin();

// 对 node 环境的配置
// process.env.NODE_ENV = 'development';

module.exports = {
    // webpack 配置
    // 入口起点
    entry: './src/js/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'js/build.js',
        // __dirname 是nodejs的变量，代表当前文件的目录的绝对路径,相当于【./】
        // resolve(__dirname,'build') 方法就相当于将这两个目录拼接起来
        path: resolve(__dirname, 'build')
    },
    // loader 配置
    module: {
        // npm i style-loader css-loader less-loader url-loader file-loader mini-css-extract-plugin postcss-loader postcss-preset-env -D
        rules: [
            {
                /*
                    js兼容性处理： babel-loader
                        1、比如讲es6的语法转化为根底版本的语法【示例：箭头函数转化为普通函数】
                            只能转化为基本语法，但是 Promise 还是无法进行转换
                        2、第一种方式 ：
                            所以我们需要进行一个全部的js兼容性处理 
                            --> @babel/polyfill  
                            --> 只需要在js文件中进行引用就行了 
                            --> import '@babel/polyfill'; 
                            --> 这样字会产生很大的一个js
                        3、第二种方式 ：
                            --> 此时我们需要按需引入，此时就需要一个 core-js 依赖了
                    下载相关的依赖： npm i babel-loader @babel/core @babel/preset-env @babel/polyfill core-js -D
                */
                test: /\.js$/,
                exclude:/node_modules/,
                loader:'babel-loader',
                options:{
                    // 预设： 指示babel做怎么样的兼容性处理
                    // presets:['@babel/preset-env'],   // 第一种方式，直接解决全部兼容问题
                    presets:[                           // 第二种方式，按需解决兼容问题
                        [
                            '@babel/preset-env',
                            {
                                // 按需加载
                                useBuiltIns:'usage',
                                // 指定 core-js 版本
                                corejs:{
                                    version:3
                                },
                                // 指定具体的兼容到那个版本的浏览器
                                targets:{
                                    chrome:'60',
                                    firefox:'60',
                                    ie:'9',
                                    safari:'10',
                                    edge:'17',
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    },
    plugins: [
        // 详细的plugins的配置
        htmlPlugin,cssPlugins,optimizeCssAssetsPlugin
    ],
    // mode: 'development', // 开发模式
    mode: 'production', // 生产模式  会自动压缩js代码

    // 开发服务器 devServer ： 用来自动化【自动编译，自动打开浏览器，自动刷新】
    // 只会在内存中编译打包，不会有任何输出
    // 启动devServer指令： npx webpack-dev-server 
    devServer:{
        contentBase:resolve(__dirname,'build'),
        // 启动gzip压缩
        compress:true,
        // 端口号
        port:3000,
        // 是否自动打开默认浏览器
        open:false
    },

}